<template>
  <div class="Comment">
    <img src="/static/img/btn_back.png" alt="btn" class="btn" @click="onNavToBack">
    <div class="main">
		<div class="wrapper">
    		<div class="title">现场互动<img src="/static/img/p5_icon1.png" class="icon" alt="icon"></div>
    		<div class="content" ref="content">
    			<ul class="items" ref="items">
	    			<li class="item" v-for="v,k in comments" :key="k">
	    				<div class="nickname">{{ v.nickname }}</div>：
	    				<div class="comment">{{ v.comment }}</div>
	    			</li>
    			</ul>
    		</div>
    		<div class="form">
    			<div class="input">
    				<label for="nickname">昵称:</label>
    				<input type="text" v-model="form.nickname" placeholder="请输入您的昵称">
    			</div>
    			<div class="input">
    				<label for="comment">留言内容:</label>
    				<textarea id="comment" v-model="form.comment" rows="7" placeholder="请输入您的留言内容"></textarea>
    			</div>
    			<div class="submit" @click="onSubmit"></div>
    		</div>
    	</div>
    </div>
  </div>
</template>

<script>
import { querystring } from 'vux'

let ani;

export default {
  name: 'Comment',
  data () {
    return {
    	comments: [],
    	form: {
	    	nickname: '',
	    	comment: ''
    	}
    }
  },
  created() {
    this.$http.get('/comments').then(({data}) => {
    	this.comments = data.data;
    });
  },
  mounted() {
  	ani = window.requestAnimationFrame(this.scrollAni);
  },
  beforeDestroy() {
	window.cancelAnimationFrame(ani);
  },
  methods: {
    onNavToBack() {
      this.$router.go(-1);
    },
    scrollAni() {
    	let scrollTop = this.$refs.content.scrollTop += 1;
		ani = window.requestAnimationFrame(this.scrollAni);
    	if (this.scrollHeight == scrollTop + this.offsetHeight) {
    		this.$refs.content.scrollTop = 0;
    	}
    },
    onSubmit() {
    	this.$http.post('/comment', querystring.stringify(this.form))
    	.then(({data}) => {
    		this.$vux.alert.show({
			  title: '提示',
			  content: '留言已发送',
			});
    	});
    }
  },
  computed: {
  	offsetHeight() {
  		return this.$refs.content.offsetHeight;
  	},
  	scrollHeight() {
  		return this.$refs.content.scrollHeight;
  	}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import "../../assets/scss/common.scss";

.Comment {
  @include bg('/static/img/bg.png');
  display: flex;
  flex-direction: column;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  &::-webkit-scrollbar {
    display: none;
  }
  .btn {
    width: 20%;
    margin: 10px;
  }
  .main {
  	padding: 0 20px;
  	font-size: 14px;
  	.wrapper {
  		margin-bottom: 20px;
  		.title {
			background: white;
			border-radius: 6px;
			padding: 10px;
			text-align: center;
			margin-bottom: 10px;
			font-weight: bold;
			box-shadow: 1px 1px 5px #999;
			position: relative;
			.icon {
				position: absolute;
				width: 11%;
				top: -20px;
				right: 5px;
			}
  		}
  		.content {
			@extend .title;
			margin-bottom: 10px;
			text-align: justify;
			font-weight: normal;
			font-size: 12px;
			height: 50vh;
			overflow: scroll;
		  -webkit-overflow-scrolling: touch;
		  &::-webkit-scrollbar {
		    display: none;
		  }
			.items {
				.item {
					display: flex;
					margin-bottom: 10px;
					&:last-of-type {
						margin-bototm: 0;
					}
					.nickname {
						width: 20%;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.comment {
						width: 80%;
						word-wrap:break-word;
						overflow: hidden;

					}
				}
			}
  		}
  		.form {
  			@extend .title;
			padding-bottom: 30px;
			position: relative;
  			margin-bottom: 50px;
			.input {
				font-size: 14px;
				display: flex;
				&:first-of-type {
					margin-bottom: 10px;
				}
				label {
					width: 70px;
					display: block;
					text-align: right;
					height: 30px;
					line-height: 30px;
					margin-right: 10px;
				}
				input {
					height: 30px;
					line-height: 30px;
					border: 1px solid #ccc;
					border-radius: 4px;
					padding: 5px;
					outline: none;
					width: 60%;
					box-sizing: border-box;
				}
				textarea {
					width: 65%;
					padding: 5px;
					box-sizing: border-box;
					border: 1px solid #ccc;
					border-radius: 4px;
					outline: none;
					resize: none;
				}
			}
			.submit {
				@include img('/static/img/p5_btn_submit.png', 30%, 15%, center, 92%, center, contain);
			}
  		}
  	}
  }

}
</style>
